<template>
<div class="list_pages">
  <span><slot name="rowscount">显示行数：</slot></span>
  <a href="javascript:" v-for="(item, index) in sizeArray" :key="index" :class="curPageSize==item? 'current':''" @click="()=>{handlePageSizeChange(item)}">{{item}}</a>
  <span>&nbsp;</span>
  <a href="javascript:" class="prve_page" @click="prvBtn"><slot name="prvpage">上一页</slot></a>
  <span><slot name="total">共</slot>&nbsp;{{ Math.ceil((pageCount || 0)/curPageSize) }}&nbsp;<slot name="page">页</slot></span>&nbsp;&nbsp;
  <span><slot name="the">第</slot>&nbsp;{{pageIndex}}&nbsp;<slot name="page">页</slot></span>
  <a href="javascript:" class="next_page" @click="nextBtn"><slot name="nextpage">下一页</slot></a>
  <span><slot name="goto">跳到第</slot><input class="pageIndex" type="text" @blur="handlePageChange" /><slot name="page">页</slot></span>
</div>
</template>

<script>
/**
 *  支持国际化（默认中文）
 *  使用该插件你需要在标签包裹内设置如下国际化属性（不设置则默认文本）：
 *  <pubicpages :page-count="count" :page-size="pageSize" :call-back="pageChangeCB" :size-array="[10, 20, 30, 40, 50]">
  *   <template slot="rowscount">Show row number（显示行数）：</template>
      <template slot="prvpage">Previous page（上一页）</template>
      <template slot="page">Page(页)</template>
      <template slot="total">Total（共）</template>
      <template slot="the">The（第）</template>
      <template slot="goto">Jump to（跳到第）</template>
      <template slot="nextpage">Next page（下一页）</template>
    </pubicpages>
 */
export default {
  name: 'pages-plugin',
  props: {
    /**
     *  展示交互视图类型
     *  1： 显示行数： 10， 20， 30，.... 上一页  共x页  第x页 转到第 x 页  下一页 
     *  2： 
     */
    pageType: {
      type: Number,
      default: 1
    },
    // 每页显示条数
    pageSize: {
      type: Number,
      default: 50
    },
    // 总条数
    pageCount: {
      type: Number,
      default: 0
    },
    // 允许切换的每页显示条数集合[10, 20, 30...]
    sizeArray:{
      type: Array,
      default: ()=>{
        return [10, 20, 30, 50]
      }
    },
    /**
     *  组件的回调函数
     *  回传参数： pageIndex , pageSize
     */
    callBack: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      // 当前选择的每页展示条数
      curPageSize: 50,
      // 当前第几页
      pageIndex: 1
    }
  },
  computed:{
  },
  watch:{
    curPageSize(){
      return this.curPageSize
    }
  },
  methods: {
    acountPageSize() {
      const pageCount = this.pageCount || 0
      return Math.ceil(pageCount/this.curPageSize)
    },
    prvBtn() {
      const pageCount = this.acountPageSize()
      if (this.pageIndex != 1 && this.pageCount>0) {
        this.pageIndex -= 1
      } else {
        return false
      }
      this.callBack(this.pageIndex, this.pageSize)
    },
    nextBtn() {
      const pageCount = this.acountPageSize()
      if (this.pageIndex != pageCount && pageCount>0) {
        this.pageIndex += 1
      } else {
        return false
      }
      this.callBack(this.pageIndex, this.pageSize)
    },
    handlePageSizeChange(value) {
      if(this.curPageSize == value) {
        return false
      }
      this.curPageSize = value
      this.callBack(this.pageIndex, this.curPageSize)
    },
    handlePageChange(e) {
      const pageNum = e.target.value - 0;
      if(!pageNum || this.pageIndex == pageNum) {
        return false
      } else {
        this.pageIndex = pageNum
        this.callBack(this.pageIndex, this.curPageSize)
      }
    }
  }
}
</script>

<style scoped>
/*分页相关样式 begin*/
/*分页相关样式 begin*/
.list_pages {
  float: right;
  line-height: 40px;
  margin: 16px 0;
  font-size: 13px;
}

.list_pages a {
  display: inline-block;
  line-height: 22px;
  margin-right: 3px;
  padding: 0 7px;
  color: #06c;
  border: 1px solid #ccc;
  text-decoration: none;
}

.list_pages a:hover {
  background: #06c;
  color: #fff;
}

.list_pages a.current {
  color: #fff;
  background-color: #0266D0;
  cursor: default;
}

input.pageIndex {
  border: 1px solid #ccc;
  height: 22px;
  line-height: 22px;
  width: 30px;
  margin: 0 2px;
  text-align: center;
  padding: 1px 2px;
}

/*分页相关样式 end*/
</style>
